<template>
	<section>
		<div class="filled">
			<mt-header title="登 录">
				<!-- <mt-button icon="back" @click="this.goBack" slot="left"></mt-button> -->
				<router-link to="/" slot="left">
					<mt-button icon="back">首页</mt-button>
				</router-link>
			</mt-header>
			<div class="wrap">
				<ul class="mt15 ml10 mr10">
					<li class="clearfix lh50 linet lineb bgdark br4">
						<!-- error, success, warning -->
						<mt-field
							label="用户名"
							:attr="{ maxlength: 11 }"
							:state="phone&&phone.length==11?'success':'warning'"
							placeholder="请输入手机号码"
							type="tel"
							v-model="phone"
						></mt-field>
					</li>
					<li class="clearfix lh50 lineb bgdark br4 mt10">
						<mt-field
							label="密码"
							state="'success':'default'"
							placeholder="请输入密码"
							type="password"
							v-model="password"
						></mt-field>
					</li>
					<li class="lh40 btn mt20 fs14" @click="login">
						<mt-button size="large" type="primary">登 录</mt-button>
					</li>
					<li class="clearfix lh50 ml10 mr10">
						<router-link to="/register">
							<span class="fl fontc1 fs14">免费注册</span>
						</router-link>
						<router-link to="/findback">
							<span class="fr fontc1 fs14">忘记密码</span>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</section>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			phoneImg: './static/imgs/phone.svg',
			passwordImg: './static/imgs/password.svg',
			phone: cookie.getCookie('USERNAME') || '',
			password: cookie.getCookie('PSW') || '',
			buttonKey: true
		}
	},
	components: {},
	computed: {
		...mapState(['userInfo']),
		...mapMutations(['setUserInfo'])
	},
	mounted() {
	},
	methods: {
		login() {
			if (!this.buttonKey) return
			if (!this.phone || this.phone.length < 11) {
				Toast('请输入正确的手机号')
				return
			}
			if (!this.password || this.password.length < 6) {
				Toast('请输入密码')
				return
			}
			this.buttonKey = false
			this.$store
				.dispatch('getLogin', {
					userPass: this.password,
					userPhone: this.phone
				})
				.then(res => {
                    Toast(res.msg)
					this.buttonKey = true
					try {
						this.goBack()
					} catch (e) {
					} finally {
                        const redirect = decodeURIComponent(this.$route.query.redirect || '/')
					    this.$router.push({ path: redirect })
                    }
                }).catch(e => {
                    this.buttonKey = true
                })
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>
<style scoped>
img {
	margin-top: -3px;
}
input {
	border: 0 none;
}
</style>